<!DOCTYPE html>
<html lang="zh-cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link th:href="@{/images/userLog1.png}"  sizes="90x90" type="image/x-icon" rel="icon">
    <link th:href="@{/frontstatic/css/iconfont.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/global.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/bootstrap-theme.min.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/swiper.min.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/styles.css}" rel="stylesheet">
    <script charset="utf-8" th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/bootstrap.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/swiper.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/global.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/jquery.DJMask.2.1.1.js}"></script>
    <link media="all" rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}">
    <script th:src="@{../../lib/layui-v2.6.3/layui.js}"></script>
    <link th:href="@{../css/public.css}" media="all" rel="stylesheet">
    <script th:src="@{/js/template-web.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/notify.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/notify_stand.js}"></script>
    <title>结算</title>
</head>
<body>

<!-- 顶部标题 -->
<div class="bgf5 clearfix">
    <div class="top-user">
        <div class="inner">
            <div class="title">购物车结算</div>
        </div>
    </div>
</div>
<div class="content clearfix bgf5">
    <section class="user-center inner clearfix">
        <div class="user-content__box clearfix bgf">
            <div class="title">收货地址</div>
            <div action="" class="shopcart-form__box">
                <div class="addr-radio" id="tableAddress">
<!--                    地址-->
                    <table class="layui-hide" id="shopingtest" lay-filter="shopingtest"></table>
                </div>
                <div class="add_addr"><a href="/skippage?url=udai_address">添加新地址</a></div>
                <div class="title">订单信息</div>
                <div class="shop-order__detail">
                    <table class="table">
                        <thead>
                        <tr>
                            <th width="120"></th>
                            <th width="300">商品信息</th>
                            <th width="150">单价</th>
                            <th width="200">数量</th>
                            <th width="200">运费</th>
                            <th width="80">总价</th>
                        </tr>
                        </thead>
                        <tbody id="commtityShoping">
                        </tbody>
                    </table>
                </div>

                <div class="title">支付方式</div>
                <div style="width: 350px;height: 80px;border-radius: 5px;border: 1px solid rgba(158,153,153,0.17);margin-top: 50px">
                    <input style="margin-top: 5px;margin-left: 5px" autocomplete="off" name="pay-mode" type="radio" checked>
                    <img style="width: 136px;height: 45px;margin-top: 17px;margin-left: 10px" alt="支付宝支付" th:src="@{/images/zhifubao.png}">
                    <img style="width: 40px;height: 20px;margin-top: 17px;margin-left: 10px"  th:src="@{/images/biaoqian.png}">
                </div>

            </div>
            <div class="item-action clearfix bgf5">
                <a style="margin-left: 345px;width: 250px" class="btnpulic" href="javascript:;" id="sumint" title="">创建订单并支付</a>
            </div>
<!--            <div class="user-form-group shopcart-submit">-->
<!--                <button class="btn" id="sumint" style="margin-top: 50px">创建订单并支付</button>-->
<!--            </div>-->
        </div>
    </section>
</div>
<!-- 右侧菜单 -->
<div class="right-nav">
    <ul class="r-with-gotop">
        <li class="r-toolbar-item to-top">
            <i class="iconfont icon-top"></i>
            <div class="r-tip__box"><span class="r-tip-text">返回顶部</span></div>
        </li>
    </ul>
    <script>
        $(document).ready(function () {
            $('.to-top').toTop({position: false})
        });
    </script>
</div>
<script id="commtityTable" type="text/template">
    {{each datebate value}}
    <tr>
        <th scope="row"><a href="item_show.html">
            <div class="img"><img alt="" class="cover" src="{{@value.image}}"></div>
        </a>
        </th>
        <td>
            <div class="name ep3">{{value.cname}}</div>
            <div class="type c9">商品规格:{{value.csku}}</div>
        </td>
        <td>¥{{value.price}}</td>
        <td>*{{value.count}}</td>
        <td>¥0.0</td>
        <td>
            {{value.price*value.count}}
            <input value="{{value.cid}}" style="display: none"/>
            <input value="{{value.speceId}}"style="display: none"/>
        </td>

    </tr>
    {{/each}}
</script>
</body>
<script type="text/html" id="switchTpl">
    <input type="radio" name="isDefault" value="{{d.id}}" {{ d.isDefault == 0 ? 'checked' : '' }}>
</script>
<script>
    var notify;
    layui.use(['notify'],function(){
        notify=layui.notify;
    })
    layui.use(['table','form'], function(){
        var table = layui.table;
        var form=layui.form;
        //监听表格复选框选择
        table.on('checkbox(shopingtest)', function(obj){
            console.log(obj)
        });
        table.render({
            elem: '#shopingtest'
            ,method:"post"
            ,url:'/address/getList'
            ,contentType:'application/json'
            ,skin:'line'
            ,id:'idTest'
            ,parseData: function(res){
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "data": res.data
                };
            }
            , done: function (res, curr, count) {
                $(".layui-table-view[lay-id='idTest'] .layui-table-body tr[data-index = '0' ] .layui-form-radio").click();
            }
            ,cols: [
                [
                {type:'radio'}
                ,{field:'region',title: '区域信息',}
                ,{field:'address',title: '详细地址',}
                ,{field:'name',title:'姓名'}
                ,{field:'phone',title:'电话'}
            ]
            ]

        });
        var orderData=[];
        // 获取提交商品信息
        $.ajax({
            type : "GET",
            url:"/getShopingData",
            async : true,
            success : function(ex){
                if (ex.code==0) {
                    ex.data.forEach(shopingg=>{
                        orderData.push(shopingg)
                    })
                    date = {datebate: ex.data}
                    mera = template("commtityTable", date);
                    $("#commtityShoping").append(mera);
                }else {
                    layer.msg(date.msg, {icon: 5});
                }
            }
        })
        //创建订单
        $("#sumint").on('click',function() {
          var syu= table.checkStatus('idTest');
          var orderVo={
              "steamShopingDataPO":orderData,
              "addressId":syu.data[0].id
          }
            $.ajax({
                type : "POST",
                url:"/order/save",
                async : true,
                contentType:'application/json',
                data: JSON.stringify(orderVo),
                dataType: "json",
                success : function(e){
                    if (e.code==0) {
                        const div =document.createElement('divform')
                        div.innerHTML=e.data;
                        document.body.appendChild(div);
                        document.forms[0].submit();
                    }else {
                        notify.error(e.msg)
                    }
                }
            })
        })
    });
</script>
</html>